<template>
  <div class="page">
    <div class="head">
      <h1>迁移抽奖券</h1>
    </div>
    <div class="panel">
      <h2>选择服务器</h2>
      <ul class="server">
        <li :class="{'active': server == 1}" @click="server = 1">
          <h3>创世服</h3>
          <span>数量：{{res[0]}}张</span>
        </li>
        <li :class="{'active': server == 2}" @click="server = 2">
          <h3>国际服</h3>
          <span>数量：{{res[1]}}张</span>
        </li>
      </ul>
      <box gap="20px 0">
        <x-button type="primary" :disabled="res[server-1] == 0" @click.native="transferConfirm(server)">确认迁移到瑞波服</x-button>
      </box>
    </div>
  </div>
</template>

<script>
  import {
    XButton,
    Box
  } from 'vux'
  export default {
    components: {
      XButton,
      Box
    },
    data() {
      return {
        res: [0, 0],
        server: 1
      }
    },
    mounted() {
      this.$nextTick(function() {
        this.initData();
      });
    },
    methods: {
      initData() {
        this.$http
          .get(`/game/v3/raffleTicketList`)
          .then(res => {
            if (res.code == 200) {
              this.res = res.result;
            } else {}
          })
          .catch(function(error) {});
      },
      transferConfirm(server) {
        var that = this;
        this.$vux.confirm.show({
          title: `提示`,
          content: 
          `<p>确认迁移${server == 1 ? '创世服' : '国际服'}的全部抽奖券到瑞波服吗?</p>
           <p style="color: red">此操作不可逆！</p>`,
          cancelText: '撤销',
          confirmText: '迁移',
          onCancel() {
            that.$vux.toast.text('已取消')
          },
          onConfirm() {
            that.transfer(server)
          }
        })
      },
      transfer(server) {
        this.$http
          .post(`/game/v3/raffleTicket`,{
            serverId: server
          })
          .then(res => {
            this.$vux.toast.text(res.msg)
            if (res.code == 200) {
              this.initData();
            } else {}
          })
          .catch(function(error) {});
      },
    },
  }
</script>

<style lang="scss" scoped>
  .server {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 10px;
    li {
      text-align: center;
      border: 1px solid transparent;
      padding: 2px 5px;
      span {
        font-size: 14px;
        color: #333;
      }
    }
    .active {
      border: 1px solid $green;
      border-radius: 5px;
    }
  }
</style>
